<script lang="ts" setup>
import { toRefs } from 'vue'
import NestedDraggable from '../../DraggableDemo/components/nestedDraggable.vue'
import { IComponentItem, IFormData, IComponentItemMap } from '../interface/IComponentItem'

interface Props {
    formData?: IFormData
    componentData: IComponentItem[]
    componentDataMap?: IComponentItemMap
    testName: string
}
const props = defineProps<Props>()
const emits = defineEmits(['chooseComp'])
const { testName, componentData } = toRefs(props)
// const componentData: IComponentItem[] = computed(() => {
//     return Object.values(props.componentDataMap)
// })

const chooseComp = (e) => {
    console.log('chooseComp==', e)
    emits('chooseComp', e)
}

</script>

<template>
    <div class="preview-warpper">
        <h4>preview--{{ testName }}</h4>
        <div class="preview-container">
            <!-- <div>当前组件名字为:{{ formData }}</div> -->
            <div>
                <template v-for="item in componentData" >
                    <div class="iframe-box">
                        {{ item.label }}
                        <div>当前组件的名字：{{ item.formData?.pageName }}</div>
                    </div>
                </template>
            </div>
            <div class="nest-draggable-container">
                <NestedDraggable :componentData="componentData" @chooseComp="chooseComp"></NestedDraggable>
            </div>
        </div>
    </div>
</template>
<style>
h4{ text-align: center;}
.preview-container {
    display: flex;
}
.iframe-box {
    width: 320px;
}
</style>